<template>
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-center">
      <view class="title">{{ title }}</view>
    </view>
    <view class="cu-content flex flex-wrap">
      <scroll-view scroll-y="true" class="scroll-h">
        <view
          class="filter-row flex justify-between align-center"
          v-for="(item, index) in filters"
          :key="index"
        >
          <view class="filter-row-left flex justify-between align-center">
            <view class="text">{{ item.name }}：&nbsp;</view>
            <view class="text">{{ item.data.length }}个</view>
          </view>
          <view class="filter-row-right">
            <button
              @tap="onUpdateQuate(item.name, item.data)"
              class="cu-btn text-blue lines-blue change-button filter-round-button"
            >改</button>
            <button
              @tap="onRemoveQuate(item.name)"
              class="cu-btn text-red lines-red remove-button filter-round-button"
            >删</button>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="cu-bar bg-white">
      <view class="action margin-0 flex-sub" @tap="$emit('hide')">取消</view>
      <view class="action margin-0 flex-sub text-blue solid-left" @tap="$emit('hide')">确定</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: [String],
      default: '标题',
    },
    filters: {
      type: [Array],
      default: () => {
        return []
      },
    },
  },
  data() {
    return {}
  },
  created() {
    // console.log(this.filters)
  },
  methods: {
    onUpdateQuate(name, data) {
      this.$emit('update', name, data)
    },
    onRemoveQuate(name) {
      this.$emit('remove', name)
    },
  },
}
</script>

<style lang="scss" scoped>
.cu-dialog {
  border-radius: 20upx;
  .cu-bar {
    padding: 30upx 40upx;
    background-color: #f9faff;
  }
  .title {
    font-size: 36upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 50upx;
  }
  .cu-content {
    background-color: #ffffff;
    height: 350upx;
    padding: 10upx 0 0;

    .scroll-h {
      height: 350upx;

      .filter-row {
        width: 100%;
        height: 94upx;
        padding: 0 30upx;
        border-bottom: 1px solid #edeff6;
        font-size: 36upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        .filter-row-left {
          .text {
            // margin-right: 8upx;
          }
        }
        .filter-row-right {
          uni-button,
          button {
            margin-left: 18upx;
            width: 60upx;
            height: 60upx;
            border-radius: 20upx;
          }
        }
      }
    }
  }
}
</style>
